<template>
  <div>
    <mu-circular-progress
      :size="90"
      color="red"
      v-if="loading"
      class="loading"
    />
    <div class="list-content-wrap" v-else>
      <list-header :list="list" :creator="creator"></list-header>
      <music-list :songs="list && list.tracks"></music-list>
    </div>
  </div>
</template>

<script lang="ts">
import listHeader from "../../components/listHeader.vue";
import musicList from "../../components/musicList.vue";
import { Vue, Component } from "vue-property-decorator";
import { CommonIdType } from "@/model/id-or-enum.model";
import { TopListInfo } from "@/model/top-list.model";
import { UserInfo } from "@/model/music-info.model";
import { APIType } from "@/api";
import { Route } from "vue-router";
@Component({
  components: {
    musicList,
    listHeader,
  },
})
export default class ListContentComponent extends Vue {
  id: CommonIdType = null;
  list: Partial<TopListInfo> = {
    id: ""
  };
  creator: UserInfo = {
    nickname: ""
  };
  loading = true;

  $api: APIType;
  $route: Route;

  mounted() {
    this.id = this.$route.params.id;
    this.$api.getTopListDetail(this.id).then((res) => {
      this.list = res;
      this.creator = this.list?.creator;
      this.loading = false;
    });
  }
}
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
